<script setup>
import { ref, onMounted, reactive, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter();

onMounted(() => {
  //绑定监听事件
  window.addEventListener('keydown', keyDown)
});

//点击回车键登录
const keyDown = (e) => {
  if (e.keyCode == 13 || e.keyCode == 100) {
    loginAction();
  }
}

var loginForm = reactive({
  loginName: 'admin',
  loginPassword: '123456'
});

var loginFormRules = reactive({
  loginName: [
    { required: true, message: '账号不可为空', trigger: 'blur' }
  ],
  loginPassword: [
    { required: true, message: '密码不可为空', trigger: 'blur' }
  ]
});

function loginAction() {
  if (loginForm.loginName === "") {
    ElMessage({
      message: '用户名不能空',
      type: 'warning',
    })
    return;
  }
  if (loginForm.loginPassword === "") {
    ElMessage({
      message: '密码不能空',
      type: 'warning',
    })
    return;
  }

  proxy.axios.post('/api/token',
    {
      username: loginForm.loginName,
      password: loginForm.loginPassword
    }).then((result) => {
      console.log(result)

      ElMessage({
        message: '登录成功',
        type: 'success',
      })
      sessionStorage.setItem("u", loginForm.loginName);
      sessionStorage.setItem("p", loginForm.loginPassword);
      sessionStorage.setItem("Authorization", (result.data.token));
      router.push('/');

    }).catch((error) => {

      console.log(error.message)

      ElMessage({
        message: '用户名或密码不正确',
        type: 'error',
      })
    });


}

</script>

<template>
  <div class="main">
    <div class="login-main-img">
      <div class="login-box">
        <span class="login-title">视频AI智能应用平台</span>
        <el-form :rules="loginFormRules" style="margin-left:30px;" :model="loginForm" status-icon label-position="right"
          label-width="auto" show-message>

          <div style="margin-top: 15px"></div>
          <el-form-item prop="loginName">
            <el-input type="text" style="width:300px;height: 40px;margin-bottom: 10px;margin-top: 15px"
              placeholder="请输入用户名" v-model="loginForm.loginName">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <User />
                </el-icon>
              </template>
            </el-input>

          </el-form-item>
          <el-form-item prop="loginPassword">
            <el-input type="password" style="width:300px;height: 40px;margin-bottom: 10px;" placeholder="请输入密码"
              v-model="loginForm.loginPassword">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <Lock />
                </el-icon>
              </template>
            </el-input>

          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="login-buttoon" @click="loginAction">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped>
.main {
  display: block;
  background: #1780a9;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
  margin: 0px;
}

.login-buttoon {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-size: 2vh;
  font-weight: bold;
  width: 300px;
  height: 50px;
  margin-top: 1vh;
  border: 0px transparent;
  border-radius: 50px;
}



.login-main-img {
  position: relative;
  background: url("../assets/login/login-bg_01.svg") no-repeat;
  height: 100%;
  width: 100%;
  background-size: cover;
  overflow: hidden;
  position: fixed;
}

.login-box {

  width: 360px;
  height: 290px;
  margin: 30vh auto;
  padding: 35px 35px 15px 35px;
  box-shadow: 0 0 2.5vw rgba(255, 255, 255, 0.25) inset;
  background: linear-gradient(to left, #4cacd1, #4cacd1) left top no-repeat,
    linear-gradient(to bottom, #4cacd1, #4cacd1) left top no-repeat,
    linear-gradient(to left, #4cacd1, #4cacd1) right top no-repeat,
    linear-gradient(to bottom, #4cacd1, #4cacd1) right top no-repeat,
    linear-gradient(to left, #4cacd1, #4cacd1) left bottom no-repeat,
    linear-gradient(to bottom, #4cacd1, #4cacd1) left bottom no-repeat,
    linear-gradient(to left, #4cacd1, #4cacd1) right bottom no-repeat,
    linear-gradient(to left, #4cacd1, #4cacd1) right bottom no-repeat;
  background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
}

.login-title {
  text-align: center;
  display: block;
  margin: 0 auto 15px auto;
  color: #FFFFFF;
  font-size: 30px;
  font-weight: bold;
}
</style>
